可変長<textarea>

ここに載っていた

19:16:30 あんまり良くわからなかった

code:tsx

import * as React from 'react';

import { useEffect } from 'react';

import styled from 'styled-components';

const OuterDiv = styled.div({

position: 'relative',

fontSize: '1rem',

lineHeight: 1.8,

});

const Dummy = styled.div({

overflow: 'hidden',

visibility: 'hidden',

boxSizing: 'border-box',

minHeight: 'calc( 1.8em )',

});

const MainText = styled.textarea({

position: 'absolute',

top: 0,

left: 0,

width: '100%',

height: '100%',

resize: 'none',

});

// 入力値に応じて可変する<input>

export const FlexTextArea: React.FC<React.TextareaHTMLAttributes<

HTMLTextAreaElement

> = ({ onChange, value, ...props }) => {

const _onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {

setText(e.target.value);

onChange?.(e);

};

return (

<OuterDiv>

<Dummy aria-hidden="true">{text}</Dummy>

<MainText value={text} onChange={_onChange} {...props} />

</OuterDiv>

);

};

Reference